<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>main</title>
</head>
<div>
    <a href="javascript:conn()">connection</a><br/>
    <a href="javascript:sub()">subscribe</a><br/>
    <a href="javascript:pub()">publish</a>
</div>

体征状态:
<div id="state"></div>
<br>
心跳次数:
<div id="heartbeat"></div>
<br>
呼吸频率:
<div id="breath"></div>
<br>
尿湿:
<div id="wet"></div>
<br>
呼吸暂停次数:
<div id="odor"></div>
<br>
在床 离床:
<div id="weight"></div>
<br>
身体位置:
<div id="position"></div>
<br>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>


<script type='text/javascript' src='/js/mosquitto-1.1.js'></script>
<script type='text/javascript' src='/js/jquery.min.js'></script>
<script src="/js/echarts.min.js"></script>
<script type="text/javascript">
    var mosq = null;
    var url = "ws://earthchen.cn:8083/mqtt";
    var topic = "/World";
    var time = 0;

    function conn() {
        if ("WebSocket" in window) {
            console.log("WebSocket is supported by your Browser!");
            mosq = new Mosquitto();
            mosq.connect(url);
            mosq.onconnect = function (rc) {
                console.log("CONNACK " + rc);
            };
            mosq.ondisconnect = function (rc) {
                console.log("Lost connection");
                mosq.connect(url);
            };
            mosq.onmessage = function (topic, payload, qos) {
                console.log(payload);
                var obj = JSON.parse(payload);
                $("#state").text(obj.state);
                $("#heartbeat").text(obj.heartbeat);
                $("#breath").text(obj.breath);
                $("#wet").text(obj.wet);
                $("#odor").text(obj.odor);
                $("#weight").text(obj.weight);
                $("#position").text(obj.position);
            };
        } else {
            console.log("WebSocket NOT supported by your Browser!");
        }
    }

    function sub() {
        mosq.subscribe(topic, 0);
    }

    function pub() {
        timetime = time + 1;
        var msg = "ws test by mosquitto-1.1.js. " + time;
        mosq.publish(topic, msg, 0);
    }
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    function randomData() {
        now = new Date(+now + oneDay);
        value = value + Math.random() * 21 - 10;
        return {
            name: now.toString(),
            value: [
                [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                Math.round(value)
            ]
        }
    }

    var data = [];
    var now = +new Date(1997, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var value = Math.random() * 1000;
    for (var i = 0; i < 1000; i++) {
        data.push(randomData());
    }

    option = {
        title: {
            text: '动态数据 + 时间坐标轴'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                var date = new Date(params.name);
                return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'time',
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%'],
            splitLine: {
                show: false
            }
        },
        series: [{
            name: '模拟数据',
            type: 'line',
            showSymbol: false,
            hoverAnimation: false,
            data: data
        }]
    };

    setInterval(function () {

        for (var i = 0; i < 5; i++) {
            data.shift();
            data.push(randomData());
        }

        myChart.setOption({
            series: [{
                data: data
            }]
        });
    }, 1000);

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>

</html>